<template>
    <div>
        {{$store.state.age}} - {{age}}

        {{$store.state.name}} - {{name}}  <button @click="changeName('张三')">点击修改名字</button>

        <div>
            已经完成的任务数量 - {{num1}}
        </div>

         <div>
            正在进行的任务数量 - {{num2}}
        </div>

        <div>
            <button @click="getGoods">获取购物车数据</button>

            <h3>这里是购物车数据</h3>
            <ul>
                <li v-for="item in products" :key="item.id">
                    <h4>商品名称：{{item.name}}</h4>
                    <p>商品价格： {{item.price}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// 关于vuex辅助函数的使用 辅助函数并不要求必须使用
// 但是需要大家会使用 并且会成为面试题或者笔试题中的部分
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    computed: {
        // 可以在computed中使用mapState取出 state中的数据
        ...mapState([
            'age',
            'name',
            'products'
        ]),

        ...mapGetters([
            'num1',
            'num2'
        ])
    },
    created() {
        console.log(this.$store);
    },
    methods:{
        // this.$store.commit('方法名称')
        ...mapMutations(['changeName']),
        // this.$store.dispatch('方法名称')
        ...mapActions(['getGoods'])
        // getGoods() {
        //     // dispatch 触发actions函数的方法
        //     this.$store.dispatch('getGoods')
        // }
    },
 }
</script>

<style scoped>
div {
    text-align: center;
}
</style>